<template>
  <div>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column label="ID" prop="id" width="70px" align="center">
        <template v-slot="scope">
          <span style="margin-left: 10px">{{ scope.row.id }}</span>
        </template>
      </el-table-column>
      <!-- 文章标题 -->
      <el-table-column
        label="文章标题"
        prop="title"
        width="200px"
        align="center"
      >
        <template v-slot="scope">
          <span style="margin-left: 10px">{{ scope.row.title }}</span>
        </template>
      </el-table-column>

      <!-- 文章内容 -->
      <el-table-column
        label="文章内容"
        prop="articleContent"
        header-align="center"
      >
        <template v-slot="scope">
          <span style="margin-left: 10px">{{ scope.row.content }}</span>
        </template>
      </el-table-column>

      <!-- 文章分类 -->
      <el-table-column
        label="文章分类"
        prop="publishDate"
        width="100px"
        align="center"
      >
        <template v-slot="scope">
          <span style="margin-left: 10px">{{ scope.row.articleType }}</span>
        </template>
      </el-table-column>

      <!-- 文章简介 -->
      <el-table-column
        label="文章简介"
        prop="updateTime"
        width="100px"
        align="center"
      >
        <template v-slot="scope">
          <span style="margin-left: 10px">{{ scope.row.articleDetails }}</span>
        </template>
      </el-table-column>

      <!-- 创建时间 -->
      <el-table-column label="创建时间" prop="createdTime" width="100px" align="center">
        <template v-slot="scope">
          <span style="margin-left: 10px">{{ scope.row.createdTime }}</span>
        </template>
      </el-table-column>
      <el-table-column align="right">
        <template #header>
          <table>
            <tr>
              <td>
                <!-- 搜索框 -->
                <el-input
                  v-model="search"
                  size="mini"
                  placeholder="输入关键字搜索"
                />
              </td>
              <td>
                <el-tooltip
                  content="开始搜索"
                  placement="bottom"
                  effect="light"
                >
                  <el-button
                    icon="el-icon-search"
                    size="mini"
                    circle
                  ></el-button>
                </el-tooltip>
              </td>
              <td>
                <!-- 发布文章 -->
                <el-tooltip
                  content="发布文章"
                  placement="bottom"
                  effect="light"
                >
                  <el-button
                    type="success"
                    @click="publish"
                    style="width: 40px; font-size: 20px; margin-left: 35px"
                    size="medium"
                    icon="el-icon-plus"
                    circle
                  ></el-button>
                </el-tooltip>
              </td>
            </tr>
          </table>
        </template>
        <template #default="scope">
          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)"
            >修改</el-button
          >

          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <el-dialog title="更新文章" :visible.sync="dialogFormVisible">
      <el-form :model="formData">
        <el-form-item label="文章标题" label-width="120px">
          <el-input v-model="formData.articleTitle" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="文章内容" label-width="120px">
          <el-input type="textarea" v-model="formData.articleContent" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="文章分类" label-width="120px">
          <el-input v-model="formData.articleType" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="文章简介" label-width="120px">
          <el-input v-model="formData.articleDetails" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="ModifyArticle">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getArticle, deleteArticle, article } from "../../../api/index";
export default {
  data() {
    return {
      dialogFormVisible: false,
      tableData: [
        {
          id: "",
          title: "",
          content: "",
          articleType:"",
          articleDetails:""
        },
      ],
      formData: {},
      search: "",
    };
  },
  methods: {
    //删除
    handleDelete(index, row) {
      console.log(index, row);
      deleteArticle(row.id)
        .then(({ data }) => {
          console.log(data);
          this.pullData();
        })
        .catch((err) => {
          console.log(err);
        });
    },
    //模态框确定
    ModifyArticle() {
      article(this.formData.id,this.formData).then(({data})=>{
        console.log(data); 
      this.pullData();
      })
      this.dialogFormVisible = false;
    },
    //修改
    handleEdit(index, row) {
      this.formData.id=row.id;
      this.formData.articleTitle=row.title;
      this.formData.articleContent=row.content;
      this.formData.articleType=row.articleType;     
      this.formData.articleDetails=row.articleDetails;
      this.dialogFormVisible=true;
      // console.log(index, row);
    },
    publish() {
      this.$router.push("/backstage/editor");
    },
    //拉取数据
    pullData() {
      //获取文章信息
      getArticle()
        .then(({ data }) => {
          console.log(data.data);
          // data.data.forEach(function(item){
          //   console.log(item.article);
          // })
          this.tableData = data.data;
          console.log(this.tableData);
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
  mounted() {
    this.pullData();
  },
};
</script>

<style>
</style>